<template>
    <div>
        <!--轮播图区域-->
        <mt-swipe :auto="4000">
           <!--  在组件中，使用<v-for循环的话，一定要使用key -->
               <!-- 将来谁使用此轮播图组件，谁为我们传递lunbotuList-->
  <mt-swipe-item v-for="item in lunbotuList" :key="item.url">
      <img :src="item.img" alt="" :class="{full:isfull}">
  </mt-swipe-item>
  <!-- <mt-swipe-item>2</mt-swipe-item>
  <mt-swipe-item>3</mt-swipe-item> -->
</mt-swipe>
    </div>
</template>
<script>
export default {
    props:["lunbotuList", "isfull"]//props的作用是接受lunbotuList
}
</script>
<style lang="scss" scoped>
.mint-swipe{
    height: 200px;
    .mint-swipe-item{
        text-align:center;
       /*  &:nth-child(1){
            background-color: pink;
        }
         &:nth-child(2){
            background-color: palegreen;
        }
         &:nth-child(3){
            background-color: palegoldenrod;
        } */
        img{
           /*  width: 100%; */
            height: 100%;
        }
        
    }
}
.full{
    width: 100%;//第一步：解决轮播图的宽度问题：我们需要一个宽度为100%的类.
}
</style>
